<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id='root'>
        <h1 v-text='msg'></h1>
        <h1 v-html='msg'></h1>
        <h1>{{number}}</h1>
        <h1 v-on:click='handleClick'>{{content}}</h1>
        <h1 @click='handleClick'>{{content}}</h1>
    </div>

    <script>
        new Vue({
            el: '#root',  //el 挂载点，与id=root的元素绑定  
            data: {  //绑定元素的数据操作    
                msg: '<h1>heloo vue</h1>',
                number: 123,
                content: '点击修改'
            },
            methods: {   //方法区
                handleClick: function(){
                    this.content = '数据修改啦'
                }
            },
        })
        /**
         *  插值表达式{{number}}
         *  指令
         *  1. v-text v-html   text不会转译  html会转译
         *  2. v-on:click 点击事件
         *  3. 简写 @click @text @html
         *  methods 方法区， 方法都写在这个里面
         * 
         *  vue实例绑定元素，后续所有的操作都是基于vue实例，而且不是元素了，角色转换思想
         *  
         * */

    </script>
</body>

</html>